import React from 'react'
import {
  Card,
  Table,
  DatePicker,
  Form,
  Breadcrumb,
  Button,
  Space,
  Image,
  Popconfirm,
  Tag,
  message,
  Radio
} from 'antd'
import { Link } from 'react-router-dom'
import img from '@/assets/error.png'
import STATUS from '@/constant/article'
import { useHistory } from 'react-router'
import Channel from '@/components/channel'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { getArticleList, delArticle } from '@/store/actions/article'
import { useDispatch, useSelector } from 'react-redux'
const { RangePicker } = DatePicker

export default function Article () {
  const ref = React.useRef({})
  const history = useHistory()
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render (cover) {
        if (cover.type === 0) {
          return <Image width={150} height={120} src={img} />
        } else {
          return (
            <Image
              width={150}
              height={120}
              src={cover.images[0]}
              fallback={img}
            />
          )
        }
      }
    },
    {
      title: '标题',
      dataIndex: 'title'
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status) => {
        const obj = STATUS.find((item) => item.id === status)
        return <Tag color={obj.color}>{obj.title}</Tag>
      }
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate'
    },
    {
      title: '阅读数',
      dataIndex: 'read_count'
    },
    {
      title: '评论数',
      dataIndex: 'comment_count'
    },
    {
      title: '点赞数',
      dataIndex: 'like_count'
    },
    {
      title: '操作',
      dataIndex: 'id',
      render (id) {
        return (
          <Space>
            <Button
              onClick={() => history.push(`/home/publish/${id}`)}
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
            />
            <Popconfirm title="确定要删除该文章吗？" onConfirm={() => del(id)}>
              <Button shape="circle" type="danger" icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        )
      }
    }
  ]
  // 获取频道列表
  const dispatch = useDispatch()
  // 获取表单列表
  const {
    results: dataSource,
    per_page: pageSize,
    page: current,
    total_count: total
  } = useSelector((state) => state.article.articles)
  React.useEffect(
    () => {
      dispatch(getArticleList())
    },
    [dispatch]
  )
  // 表单筛选
  const params = ref.current
  const onFinish = (values) => {
    if (values.status !== -1) {
      params.status = values.status
    } else {
      params.status = ''
    }
    params.channel_id = values.channel_id
    if (values.date) {
      params.begin_pubdate = values.date[0]
        .startOf('day')
        .format('YYYY-MM-DD HH:mm:ss')
      params.end_pubdate = values.date[1]
        .endOf('day')
        .format('YYYY-MM-DD HH:mm:ss')
    }

    dispatch(getArticleList(params))
  }
  // 分页功能
  const onChangePage = (page, pageSize) => {
    params.page = page
    params.per_page = pageSize
    dispatch(getArticleList(params))
  }
  // 删除功能
  const del = async (id) => {
    await dispatch(delArticle(id))
    // 重新发送请求
    await dispatch(getArticleList(params.current))
    message.success('删除成功')
  }
  return (
    <div>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>文章列表</Breadcrumb.Item>
          </Breadcrumb>
        }>
        <Form initialValues={{ status: -1 }} onFinish={onFinish}>
          <Form.Item label="状态" name="status">
            <Radio.Group>
              {STATUS.map((item) => (
                <Radio key={item.id} value={item.id}>
                  {item.title}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item label="频道" name="channel_id">
            <Channel />
          </Form.Item>

          <Form.Item label="日期" name="date">
            <RangePicker />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Card title={`根据筛选条件共查询到${total}条数据`} style={{ marginTop: 10 }}>
        <Table
          pagination={{
            pageSize: pageSize,
            current: current,
            total: total,
            onChange: onChangePage
          }}
          rowKey="id"
          dataSource={dataSource}
          columns={columns}
        />
      </Card>
    </div>
  )
}
